<template>
  <div>
    回收站
    <el-table :data="files" style="width: 100%">
      <el-table-column prop="filename" label="文件名"></el-table-column>
      <el-table-column prop="size" label="文件大小"></el-table-column>
      <el-table-column prop="created_at" label="删除时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="restoreFile(row)"> 恢复 </el-button>
          <el-button type="danger" @click="deleteForever(row)">
            永久删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { recycleApi, recoverApi, deleteForeverApi } from "@/utils/api";

const files = ref([]);
const userId = localStorage.getItem("id");

// 获取回收站文件列表
const fetchFiles = () => {
  recycleApi({ userId }).then((res) => {
    files.value = res.data;
  });
};

fetchFiles();

// 恢复文件
const restoreFile = (row) => {
  const fileId = row.id;
  console.log(fileId);
  recoverApi({ fileId }).then((res) => {
    fetchFiles();
  });
};

// 永久删除文件
const deleteForever = (row) => {
  const confirm = window.confirm("确认永久删除该文件吗？");
  if (!confirm) return;

  const fileId = row.id;
  deleteForeverApi({ id: fileId }).then((res) => {
    fetchFiles();
  });
};
</script>

<style lang="css" scoped></style>
